<template>
  <div class="chart-item large">
    <div class="chart-header">
      <h3>物料流转趋势</h3>
      <div class="chart-tabs">
        <el-radio-group v-model="flowType" size="small" @change="handleFlowTypeChange">
          <el-radio-button label="inbound">入库</el-radio-button>
          <el-radio-button label="outbound">出库</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="chart-content">
      <div ref="materialFlowChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'MaterialFlowChart',
  data() {
    return {
      flowType: 'inbound',
      chart: null
    }
  },
  mounted() {
    // 延迟初始化，确保DOM完全渲染
    setTimeout(() => {
      this.initChart()
    }, 100)
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.materialFlowChart
        if (!chartDom) return

        this.chart = echarts.init(chartDom)
        this.updateChart()

        // 监听窗口大小变化
        window.addEventListener('resize', () => {
          if (this.chart) {
            this.chart.resize()
          }
        })
      })
    },

    updateChart() {
      if (!this.chart) return
      const inboundData = [
        { name: '华东库房', data: [120, 132, 101, 134, 90, 230, 210] },
        { name: '华南库房', data: [85, 92, 78, 97, 65, 159, 148] },
        { name: '华北库房', data: [65, 72, 58, 77, 45, 129, 118] },
        { name: '西南库房', data: [45, 52, 38, 57, 25, 99, 88] },
        { name: '其他库房', data: [25, 32, 18, 37, 15, 69, 58] }
      ]

      const outboundData = [
        { name: '华东库房', data: [110, 125, 95, 128, 85, 220, 200] },
        { name: '华南库房', data: [80, 88, 72, 92, 60, 152, 142] },
        { name: '华北库房', data: [60, 68, 52, 72, 40, 122, 112] },
        { name: '西南库房', data: [40, 48, 32, 52, 20, 92, 82] },
        { name: '其他库房', data: [20, 28, 12, 32, 10, 62, 52] }
      ]

      const currentData = this.flowType === 'inbound' ? inboundData : outboundData
      const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: currentData.map(item => item.name),
          top: '5%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            fontSize: 11,
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          name: this.flowType === 'inbound' ? '入库数量' : '出库数量',
          nameTextStyle: {
            color: '#666',
            fontSize: 12
          },
          axisLabel: {
            color: '#666',
            fontSize: 11
          }
        },
        series: currentData.map((item, index) => ({
          name: item.name,
          type: 'line',
          smooth: false,
          data: item.data,
          lineStyle: {
            color: colors[index]
          },
          itemStyle: {
            color: colors[index]
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors[index] + '40' },
              { offset: 1, color: colors[index] + '10' }
            ])
          }
        }))
      }

      this.chart.setOption(option, true)
    },

    handleFlowTypeChange(type) {
      this.flowType = type
      this.updateChart()
      this.$emit('flow-type-change', type)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 组件特有样式 */
.chart-tabs {
  ::v-deep .el-radio-button__inner {
    padding: 6px 12px;
    font-size: 12px;
  }
}

.chart-content {
  .chart {
    width: 100%;
    height: 300px;
  }
}
</style>
